.wrapper {
  width                : 100%;
  height               : 700px;
  display              : grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items        : center;
  align-items          : center;


  .qrcode1,
  .qrcode2,
  .qrcode3 {
    position       : relative;
    display        : grid;
    justify-content: center;
    align-items    : center;
    width          : 200px;
    height         : 200px;
    background-size: cover;

    &::before {
      content       : "";
      position      : absolute;
      top           : 0;
      left          : 0;
      width         : 100%;
      height        : 100%;
      background    : linear-gradient(135deg, #ed612b, #e161b1);
      mix-blend-mode: lighten;
      z-index       : 2;
    }
  }

  .qrcode1 {
    background-image: url("./qrcode-test.png");
  }

  .qrcode2 {
    background-image: url("./qrcode-test2.jpg");

    &::before {
      clip-path: polygon(0% 0%,
          0% 100%,
          40% 100%,
          40% 40%,
          60% 40%,
          60% 60%,
          40% 60%,
          40% 100%,
          100% 100%,
          100% 0%);
    }

  }

  .qrcode3 {

    background-image: url("./qrcode-test3.png");

    &::before {
      -webkit-mask: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 14%, rgb(0, 0, 0) 14%);

    }

  }
}